<template>
  <view class="content">
    <view class="search">
      <view class="store" v-if="flag == 'szhkey'">
        <img src="../../static/icons/logo.png" class="logo" alt="" />
      </view>
      <view class="store" v-if="flag == 'ysmkey'">
        <img src="../../static/icons/logo1.png" class="logo" alt="" />
      </view>
      <view class="sousuo">
        <u-search
          bgColor="#eeeeee"
          borderColor="#eee"
          placeholder="请输入关键字"
          :showAction="searchtext"
          v-model="keyword"
        ></u-search
      ></view>
    </view>
    <view class="notice">
      <view class="u-demo-block__content">
        <u-notice-bar
          :text="text1"
          color="#ffffff"
          bgColor="#f56c6c"
        ></u-notice-bar>
      </view>
    </view>
    <view class="section">
      <u-scroll-list>
        <view class="scroll-list" style="flex-direction: row">
          <view class="scroll-list__line">
            <view
              class="scroll-list__line__item"
              v-for="item in protypelist"
              :key="item.id"
            >
              <view @click="toptype(item.id)">
                <u-image
                  :lazy-load="true"
                  class="scroll-list__line__item__image"
                  :showLoading="true"
                  :src="item.thumb"
                  width="90px"
                  height="90px"
                >
                  <template v-slot:loading>
                    <u-loading-icon color="red"></u-loading-icon> </template
                ></u-image>
                <text class="scroll-list__line__item__text">{{
                  item.name
                }}</text>
              </view>
            </view>
          </view>
          <view class="scroll-list__show-more" @click="toprotypemore">
            <text class="scroll-list__show-more__text">查看更多</text>
            <u-icon name="arrow-leftward" color="#f56c6c" size="12"></u-icon>
          </view>
        </view>
      </u-scroll-list>
    </view>

    <!-- 精选 -->
    <view>
      <view class="Box">
        <view class="jingxuan">
          <view class="left">
            <h4>奢总汇精选</h4>
          </view>
          <view class="center">
            <span>100%验货包装真 | 全国包邮 | 品质包退</span>
          </view>
          <view class="right" @click="toprotypemore">
            <span>更多>></span>
          </view>
        </view>
        <view class="main">
          <u-scroll-list :indicator="false">
            <view class="scroll-list1" style="flex-direction: row">
              <view
                class="scroll-list__goods-item"
                v-for="(item, index) in list"
                @click="toinfo(item.id)"
                :key="index"
                :class="[
                  index === 9 && 'scroll-list__goods-item--no-margin-right',
                ]"
              >
                <u-image
                  :lazy-load="true"
                  class="scroll-list__goods-item__image"
                  :showLoading="true"
                  :src="item.thumbs_text[0]"
                  width="90px"
                  height="90px"
                >
                  <template v-slot:loading>
                    <u-loading-icon color="red"></u-loading-icon> </template
                ></u-image>

                <text class="scroll-list__goods-item__text"
                  >￥{{ item.price }}</text
                >
              </view>
              <view class="scroll-list__show-more" @click="toprotypemore">
                <text class="scroll-list__show-more__text">查看更多</text>
                <u-icon
                  name="arrow-leftward"
                  color="#f56c6c"
                  size="12"
                ></u-icon>
              </view>
            </view>
          </u-scroll-list>
        </view>

        <view class="swiper">
          <h5>当月榜单</h5>
          <u-swiper
            :list="list12"
            keyName="url"
            showTitle="circular"
            height="160px"
            :autoplay="true"
          ></u-swiper>
        </view>
      </view>
    </view>

    <!-- 浏览商品 -->
    <!-- <view class="liulan">
      <view class="waterfall-container">
        <view class="waterfall-item" v-for="(item, index) in prolist" :key="item.id">
          <image
            :src="item.thumbs_text[0]"
            mode="aspectFill"
            class="watch-image"
          ></image>
          <view class="biaoname">
            <view class="watch-name">{{
              item.brankname_text + item.btypename_text + item.model
            }}</view>
          </view>
          <view class="priceandcount">
            <text class="price">￥12324</text>
            <text class="count">60<span>人付款</span></text>
          </view>
        </view>
      </view>
    </view> -->

    <view class="uni-product-list">
      <view
        class="uni-product"
        v-for="(item, index) in prolist"
        :key="index"
        @click="toinfo(item.id)"
      >
        <view class="image-view">
          <u-image
            :showLoading="true"
            :lazy-load="true"
            :src="item.thumbs_text[0]"
            width="165px"
            height="165px"
          >
            <template v-slot:loading>
              <u-loading-icon color="red"></u-loading-icon> </template
          ></u-image>
        </view>
        <view class="uni-product-title">{{
          item.brankname_text + item.btypename_text + item.code
        }}</view>
        <view class="uni-product-price">
          <text class="uni-product-price-original">￥{{ item.price }}</text>
          <!-- <text class="uni-product-price-original">{{item.price }}</text> -->
          <text class="uni-product-tip">优惠</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  onLoad() {
    this.gethomelist();
    this.getprotypelist();
    this.gettuijian();
  },
  // onLoad(){
  //   setInterval(()=>{
  //   this.flag = uni.getStorageSync("flag")
  //  },1200)    },

  onShow() {
    this.flag = uni.getStorageSync("flag");
  },

  data() {
    return {
      flag: "",
      list12: [
        {
          url: "https://cdn.uviewui.com/uview/swiper/swiper2.png",
          title: "身无彩凤双飞翼，心有灵犀一点通",
          type: "image",
        },
        {
          url: "https://cdn.uviewui.com/uview/swiper/swiper2.png",
          title: "身无彩凤双飞翼，心有灵犀一点通",
          type: "image",
        },
        {
          url: "https://cdn.uviewui.com/uview/swiper/swiper3.png",
          title: "谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳",
        },
      ],
      protypelist: [],
      prolist: [],
      text1:
        "购表、选表，优选奢总汇，奢总汇品牌多，优惠大，真正做到货真价实，高质量、高保证。",

      loadingText: "正在加载...",
      list: [
        {
          price: "230.5",
          thumb: "https://cdn.uviewui.com/uview/goods/1.jpg",
        },
        {
          price: "74.1",
          thumb: "https://cdn.uviewui.com/uview/goods/2.jpg",
        },
        {
          price: "8457",
          thumb: "https://cdn.uviewui.com/uview/goods/6.jpg",
        },
        {
          price: "1442",
          thumb: "https://cdn.uviewui.com/uview/goods/5.jpg",
        },
      ],
    };
  },

  methods: {
    toprotypemore() {
      uni.$u.route({
        url: "/pagesA/screen/protype",
      });
    },
    // 获取推荐的商品
    async gettuijian() {
      let result = await this.$u.api.product.getsellcolumndata();
      if (result.code) {
        this.list = result.data;
      }
    },
    // 去到分类的商品
    toptype(e) {
      uni.$u.route({
        url: "pagesA/screen/screen",
        params: {
          ptypeid: e,
        },
      });
    },

    // 去到商品详情页
    toinfo(e) {
      uni.$u.route({
        url: "pagesA/product/info",
        params: {
          proid: e,
        },
      });
    },
    // 获取商品数据
    async gethomelist() {
      let result = await this.$u.api.product.homelist();
      if (result.code) {
        this.prolist = result.data;
      }
    },
    async getprotypelist() {
      let result = await this.$u.api.product.protypelist();
      if (result.code) {
        this.protypelist = result.data;
      }
    },
    showMore() {
      uni.$u.toast("查看更多");
    },
    left() {
      console.log("left");
    },
    right() {
      console.log("right");
    },
  },
};
</script>

<style lang="scss">
page {
  background: #f7f7f7;
}

.search {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  margin-top: 10px;

  .store {
    width: 100px;
    padding: 5px;
  }
  .sousuo {
    width: 65%;
  }
}

.logo {
  width: 100px;
  height: 35px;
}

.section {
  background: #ffffff;
  border: 1px solid #eeeeee;
  width: 99%;
  font-size: 16px;

  margin: 5px auto;
}

.scroll-list {
  @include flex(column);
  width: 100%;

  flex-wrap: warp;

  &__goods-item {
    margin-right: 20px;

    &__image {
      width: 95px;
      height: 95px;
      border-radius: 4px;
    }

    &__text {
      color: #f56c6c;
      text-align: center;
      font-size: 14px;
      margin-top: 5px;
    }
  }

  &__show-more {
    background-color: #fff0f0;
    border-radius: 3px;
    padding: 3px 6px;
    @include flex(column);
    align-items: center;

    &__text {
      font-size: 12px;
      width: 12px;
      color: #f56c6c;
      line-height: 16px;
    }
  }

  &__line {
    @include flex;
    margin-top: 6px;

    &__item {
      text-align: center;

      &__image {
        width: 80px;
        height: 80px;
      }

      &__text {
        margin-top: 5px;
        color: $u-content-color;
        font-size: 13px;
        margin-left: 6px;
        text-align: center;
      }

      &--no-margin-right {
        margin-right: 0;
      }
    }
  }
}

.Box {
  .jingxuan {
    width: 100%;
    display: flex;
    margin-top: 16px;
    justify-content: space-around;
    align-items: center;

    .left {
      h4 {
        margin-left: -5px;
        font-family: "STFangsong", "FangSong", "仿宋体", serif;
        font-weight: 800;
        /* 设置字体粗细，可以根据需要调整数值 */
        font-size: 17px;
        transform: skewX(-6deg);
        /* 在水平方向上倾斜10度 */
      }
    }

    .center {
      background: #fceac4;
      height: 12px;
      line-height: 12px;
      color: #111111 !important;

      span {
        color: #888888;
        font-size: 10px;
      }
    }

    .right {
      font-size: 10px;
      color: #979797;
    }
  }
}

.bangdan {
  width: 100%;
  height: 180px;
  margin-top: 20px;
  margin-bottom: 10px;

  h5 {
    padding-bottom: 10px;
    padding-left: 10px;
  }
}

.scroll-list1 {
  @include flex(column);
  width: 90%;
  margin: 0 auto;
  margin-top: 25px;

  &__goods-item {
    margin-right: 20px;

    &__image {
      &__image {
        width: 95px;
        height: 95px;
      }

      border-radius: 4px;
    }

    &__text {
      color: #f56c6c;
      text-align: center;
      font-size: 1px;
      margin-top: 5px;
    }
  }

  &__show-more {
    background-color: #fff0f0;
    border-radius: 3px;
    padding: 3px 6px;
    @include flex(column);
    align-items: center;

    &__text {
      font-size: 12px;
      width: 12px;
      color: #f56c6c;
      line-height: 16px;
    }
  }
}

.goods-list {
  padding-top: 10px;

  .loading-text {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    color: #979797;
    font-size: 12px;
  }

  .product-list {
    width: 100%;
    padding: 0 4% 3vw 4%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .product {
      width: 49%;
      padding-bottom: 10px;
      padding-top: 10px;
      height: auto;
      border-radius: 10px;
      background-color: #fff;
      margin: 0 0 7px 0;
      box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);

      image {
        width: 100%;
        border-radius: 10px 10px 0 0;
      }

      .name {
        width: 92%;
        padding: 5px 4%;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        text-align: justify;
        overflow: hidden;
        font-size: 14px;
      }

      .info {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        width: 92%;
        padding: 5px 4% 5px 4%;

        .price {
          color: #e65339;
          font-size: 15px;
          font-weight: 600;
        }

        .slogan {
          color: #807c87;
          font-size: 12px;
        }
      }
    }
  }
}

.swiper {
  h5 {
    font-family: "STFangsong", "FangSong", "仿宋体", serif;
    font-weight: 800;
    /* 设置字体粗细，可以根据需要调整数值 */
    font-size: 17px;
    padding: 10px;
    transform: skewX(-6deg);
    /* 在水平方向上倾斜10度 */
  }
}
.notice {
  margin-top: 10px;
  padding-bottom: 10px;
}

.liulan {
  width: 100%;

  .waterfall-container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    /* 往左边排版 */
    padding: 30rpx;
  }

  .waterfall-item {
    width: 47%;
    /* 控制每个瀑布流项的宽度 */
    margin-bottom: 20rpx;
    background: #ffffff;
    margin-right: 10px;
    /* 设置右边间隙 */
    box-shadow: 10px 10px 10px #e4e0e0;
    /* 设置阴影效果 */

    background-color: #f5f5f5;
    border-radius: 10rpx;
    border: 1px solid #eeeeee;
    box-sizing: border-box;

    .priceandcount {
      display: flex;
      width: 100%;

      justify-content: space-around;
    }
  }

  .watch-image {
    width: 100%;
    height: 300rpx;
    border-radius: 10rpx;
  }

  .biaoname {
    width: 160px;
    align-items: left;

    height: 45px;

    .watch-name {
      margin-top: 10rpx;
      font-size: 22rpx;
      color: #888;
      overflow: auto;
      text-overflow: ellipsis;
      white-space: wrap;
    }
  }

  .watch-price {
    margin-top: 5rpx;
    padding-right: 15px;
    font-weight: bold;
    font-size: 25rpx;
    color: #ff6347;
  }
}

.uni-product-list {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  flex-direction: row;
}

.uni-product {
  padding: 20upx;
  display: flex;
  flex-direction: column;
}

.image-view {
  height: 330upx;
  width: 330upx;
  margin: 12upx 0;
}

.uni-product-image {
  height: 330upx;
  width: 330upx;
}

.uni-product-title {
  width: 165px;
  word-break: break-all;
  display: -webkit-box;
  overflow: hidden;
  line-height: 1.5;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.uni-product-price {
  margin-top: 10upx;
  font-size: 28upx;
  line-height: 1.5;
  position: relative;
}

.uni-product-price-original {
  color: #e80080;
}

.uni-product-price-favour {
  color: #888888;
  text-decoration: line-through;
}

.uni-product-tip {
  position: absolute;
  right: 10upx;
  background-color: #ff3333;
  color: #ffffff;
  padding: 0 10upx;
  font-size: 15px;
  border-radius: 5upx;
}
</style>
